<template>
  <!-- 表格  props.isSelect ? props.rowSelection : -->
  <!--v-if/v-else 是为了就解决expandedRowsChange只会在首次进行渲染问题 -->
  <a-table class="aTable" ref="baseTable" @expand="onExpand" @expandedRowsChange="expandedRowsChange"
    :scroll="props.scroll" :data-source="props.dataSource" :row-key="props.rowKey"
    :defaultExpandAllRows="props.defaultExpandAllRows" :defaultExpandedRowKeys="defaultExpandedRowKeys"
    :pagination="false" :columns="columns" :row-selection="props.rowSelection === 1 ? null : rowSelection"
    :customRow="props.customRow"
    @change="(pagination: any, filters: any, sorter: any,) => change(pagination, filters, sorter,)"
    v-if="props.dataSource.length">
    <template v-for="(value, key) in slots" v-slot:[key]="slotProps" :key="key">
      <slot :name="key" v-bind="slotProps"></slot>
    </template>
  </a-table>
  <a-table class="aTable" ref="baseTable" :columns="columns" v-else>
    <template v-for="(value, key) in slots" v-slot:[key]="slotProps" :key="key">
      <slot :name="key" v-bind="slotProps"></slot>
    </template>
  </a-table>
  <pagination :pageSize="props.pageSize" :pageCurrent="props.pageCurrent" @selectAll="selectAll"
    :dataSource="props.dataSource" @changePage="changePage" :isSelect="selectedRowKeys.length" :simple="props.simple"
    :total="props.total" :selfChecked="selfChecked" :scroll="scroll" :showCheckDelete="props.showCheckDelete"
    v-if="props.isShowPagination && props.dataSource.length">
    <template #opration>
      <slot name="otherOpration"></slot>
    </template>
  </pagination>
</template>

<script lang="ts" setup>
import {
  ref,
  reactive,
  useSlots,
  computed,
  watch,
  nextTick,
  unref,
} from "vue";
import { baseProps } from "./tableConfig/props";
import pagination from "@/components/pagination/index.vue";
//type
interface dataSourceType {
  [propName: string]: any;
}

//props
const props = defineProps(baseProps);
//emit
const emit = defineEmits([
  "deleteRecord",
  "changePage",
  "moveRecord",
  "expanded",
  "change",
  "onSelectChange",
]);

//data
const selectedRowKeys = ref(props.selectedRowKeys); //默认选中
const selectedRow = ref<dataSourceType[]>([]);
const selfChecked = ref<Boolean | any>(false); //自定义全选按钮是否选中
const defaultExpandedRowKeys = ref<(string | number)[]>([]);
//methods
const slots = useSlots();
const expandedRowsChange = async (expandedRows: any) => {
  // / defaultExpandedRowKeys.value = expandedRows;
};
const onExpand = async (expanded: Boolean, record: dataSourceType) => {
  emit("expanded", expanded, record);
};
const onSelectChange = (changableRowKeys: [], selectedRows: any) => {
  // 选择发生改变
  selectedRow.value = selectedRows;
  selfChecked.value =
    changableRowKeys.length == props.dataSource.length
      ? true && props.dataSource.length
      : false;
  selectedRowKeys.value = changableRowKeys;
  emit('onSelectChange', changableRowKeys, selectedRows)
};
const selectAll = (selected: [], selectedRows: [], changeRows: []) => {
  // 自定义全选或反选
  //onSelectChange(selected);
  selectedRowKeys.value.length > 0
    ? onSelectChange([], selectedRows)
    : onSelectChange(selected, selectedRows);
};
// 获取分页的改变
const changePage = (data: { pageCurrent: any; pageSize: any }) => {
  emit("changePage", data);
};
//watch
watch(
  () => props.selectedRowKeys,
  (newVal, oldVal) => {
    selectedRowKeys.value = newVal;
  },
  { deep: true }
);
//computed
const rowSelection = computed(() => {
  return {
    selectedRowKeys: unref(selectedRowKeys),
    onChange: onSelectChange,
    hideDefaultSelections: false,
    onSelectAll: selectAll,
    hideSelectAll: props.hideSelectAll === 1 ? true : false, // 隐藏全选勾选框与自定义选择项
    // getCheckboxProps: (record: dataSourceType) => { // 暂时先不删除
    //   onSelectChange(selectedRowKeys.value, selectedRow.value);
    //   console.log(record, 8881232)
    //   return {
    //     props: {
    //       defaultChecked: selectedRowKeys.value.includes(record.id),
    //     },
    //   };
    // },
    getCheckboxProps: (record: dataSourceType) => {
      return {
        disabled: props.disabledParam ? (record[props.disabledParam] == props.disabledValue) : false,
      }
    },
    //selections: props.rowSelection || [],
  };
});

// watch
watch(
  () => props.dataSource,
  (newVal, oldVal) => {
    if (JSON.parse(JSON.stringify(newVal)) != JSON.parse(JSON.stringify(oldVal))) {
      nextTick(() => {
        selfChecked.value = false;
      });
      //selectedRowKeys.value = [];
    }
  },
  { deep: true }
);
// methods
const change = (pagination: any, filters: any, sorter: any) => {
  emit("change", pagination, filters, sorter);
};
// defineExpose
defineExpose({ selectedRowKeys, selectedRow });
</script>

<style lang="less" scoped>
:deep(.ant-checkbox + span) {
  padding-left: 16px;
  padding-right: 16px;
}

:deep(.ant-btn) {
  margin-left: 8px;
}

:deep(.table-bottom_fiexd) {
  border-radius: 2px;

  div:first-child {
    // background: transparent;
  }

  >div:first-child::after {
    box-shadow: 0px -12px 48px 16px rgba(0, 0, 0, 0.03),
      0px -9px 28px 0px rgba(0, 0, 0, 0.05), 0px -6px 16px -8px rgba(0, 0, 0, 0.08);
    height: 48px;
    position: absolute;
    bottom: -48px;
    left: 0;
    // z-index: 2;
    content: "";
    width: 100%;
    background: transparent;
  }

  // .checkDelete,
  // .paginationSetting {
  //   z-index: 30;
  // }
}
</style>
